﻿@{
    ViewBag.Title = "商品搜索";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">
    <link href="~/Content/Style/home.css" rel="stylesheet" />
    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .rating-wrapper {
            border: none;
            margin-bottom: 53px;
        }

            .rating-wrapper .rating-item {
                display: flex;
                border-bottom: 1px solid rgba(7, 17, 27, 0.1);
            }

                .rating-wrapper .rating-item .avatar {
                    flex: 0 0 150px;
                    width: 150px;
                    margin-right: 12px;
                }

                .rating-wrapper .rating-item .content_sum {
                    padding: 20px 0;
                    position: relative;
                    flex: 1;
                }

                    .rating-wrapper .rating-item .content_sum .text {
                        margin-bottom: 8px;
                        line-height: 18px;
                        color: rgba(0,0,0,.54);
                        font-size: 12px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        padding-right: 5px;
                    }

        .content .price {
            font-weight: 700;
            line-height: 24px;
        }

            .content .price .now {
                margin-right: 8px;
                font-size: 14px;
                color: #ff6000;
            }

            .content .price .old {
                text-decoration: line-through;
                font-size: 10px;
                color: rgb(147, 153, 159);
            }
    </style>
</head>

<body>
    <div id="app">
        <!---搜索框-->
        <div class="seach">
            <input id="SeachDishesNmae" name="SeachDishesNmae" placeholder="搜索商品" />
            <span class="sea">
                <img src="../../Content/images/search_icon.png" id="btn_Search" v-on:click="SeachDishes()" />
            </span>
        </div>
        <!---边框线-->
        <div style="border:1px solid rgba(7, 17, 27, 0.1);margin-top: 10px;"></div>
        <!---搜索商品列表-->
        <div class="rating-wrapper content" id="Productos">
            <ul>
                <li class="rating-item" v-for="i in listProductos">
                    <a :href="'/Classification/Summary?id='+ i.DishesID">
                        <div class="avatar">
                            <img :src="ChangeDishesPic(i.DishesPicSmall)" height="150" width="120" />
                        </div>
                    </a>
                    <a :href="'/Classification/Summary?id='+ i.DishesID">
                        <div class="content_sum">
                            <h1 class="title">{{i.DishesNmae}}</h1>
                            <p class="text">{{i.DishesTxt}}</p>
                            <div class="price">
                                <span class="now" v-if="i">￥{{i.DishesPay}}</span><span class="old" v-if="i">￥{{i.DishesMon}}</span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!---底部-->
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    <a href="/">
                        <div class="footer-img">
                            <i class="iconfont icon-union" style="font-size: 28px;"></i>
                        </div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Classification/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-dingdan1" style="font-size: 28px;"></i>
                        </div>
                        <span>分类</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/ShoppingCart/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-gouwuche4" style="font-size: 28px;"></i>
                        </div>
                        <span>购物车</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Information/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-wode1" style="font-size: 28px;"></i>
                        </div>
                        <span>个人中心</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script>
        $(function() {
            //绑定键盘按下事件
            $(document).keypress(function (e) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                //回车键事件
                if (e && e.keyCode == 13) {   //keyCode=13是回车键
                    $("#btn_Search").click();
                }
            });
        })

        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    dada: 2,
                    currentIndex: 2,
                    listProductos: '',
                };
            },
            methods: {
                SeachDishes: function () {
                    var DishesNmae = $("#SeachDishesNmae").val();
                    $.ajax({
                        url: "/Home/GetDishesList",
                        type: "POST",
                        dataType: "json",
                        data: { DishesNmae: DishesNmae, PaiXu: 0, DishesTypeID1: '', DishesTypeID2: '', YZM: '', RETID: 1 },
                        success: function (data) {
                            if (data.BS == 1 && data.rows != null) {
                                vm.listProductos = data.rows;
                            }
                            else {
                                vm.listProductos = null;
                                var dialog = jqueryAlert({
                                    'title': '搜索提示',
                                    'content': "没有找到相关商品!",
                                    'modal': true,
                                    'buttons': {
                                        '确定': function () {
                                            dialog.close();
                                        },
                                    }
                                });
                            }
                        }
                    });
                },
                ChangeDishesPic(Pic) {
                    if (Pic == "" || Pic == null) {
                        Pic = "../../Content/images/testImages/暂无图片.jpg" //后台图片为空,设置为默认图片
                    }
                    return Pic;
                },
            }
        });
    </script>
</body>
</html>
